$animation-duration: 300ms;

.content {
  height: 100%;
  width: 100%;

  display: flex;
  flex-direction: column;
}

.loading {
  display: block;
  width: 100%;

  :global {
    .euiLoadingContent__singleLine {
      height: 46px;
      margin-bottom: 10px;
    }

    .euiLoadingContent__singleLine:last-child:not(:only-child) {
      width: 100%;
    }
  }
}

.header {
  padding: 0 15px 0 !important;

  .headerTop {
    display: flex;
    align-items: center;
  }

  .betaBadge {
    margin-left: 16px;
    background-color: var(--recommendationLiveBorderColor) !important;
    border: 1px solid var(--triggerIconActiveColor) !important;
    color: #fff7ea !important;
  }

  .title {
    font:
      normal normal 500 18px/22px Graphik,
      sans-serif;
  }

  .actions {
    min-height: 40px;
    margin: 8px -15px 0;
  }
}

.body {
  padding: 8px 15px 24px !important;
  flex-grow: 1;

  @include eui.scrollBar;
  overflow-y: auto;
}

.footer {
  min-height: 26px;
  background: var(--tableRowSelectedColor) !important;
  display: flex;
  justify-content: center;
  align-items: center;

  .footerIcon {
    width: 32px;
    height: 22px;
    margin-right: 16px;
  }

  .text,
  .link {
    font:
      normal normal 400 12px/14px Graphik,
      sans-serif !important;
    color: var(--recommendationColor) !important;
  }

  .link {
    vertical-align: super;
    padding-top: 2px;
  }
}

.actions {
  display: flex;
  align-items: center;
  background: var(--recommendationBgColor);
  padding: 8px 24px;
  justify-content: space-between;

  .boldText {
    font:
      normal normal 600 14px/17px Graphik,
      sans-serif !important;
  }

  .githubIcon {
    color: var(--htmlColor);
  }

  .infoIcon {
    width: 16px !important;
    height: 16px !important;
    fill: var(--htmlColor);
    cursor: pointer;
  }

  .tooltipAnchor {
    margin-left: 6px;
  }
}

.tooltip {
  max-width: 314px !important;
}

.hideCheckbox {
  > :global(.euiCheckbox__square + .euiCheckbox__input:not(:checked)) {
    background: var(--recommendationBgColor) !important;
  }
}

.hideBtn {
  margin-bottom: 3px;
}
